<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        名称
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="名称"
          v-model="tableParams.name"
          search-button
          @search="refresh"
          @press-enter="refresh"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add">新增记录</a-button>
      </template>
    </ConditionBox>
    <TableTurn :tableData="getInterviewRecord" ref="tableRef">
      <a-table-column dataIndex="" title="序号" :width="100">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column dataIndex="name" title="名称"></a-table-column>
      <a-table-column dataIndex="note" title="描述"></a-table-column>
      <a-table-column dataIndex="" title="状态" :width="100">
        <template #cell="{ record }">
          <StatusTag
            :enable="record.status"
            :lable="record.status === 1 ? '启用' : '停用'"
          />
        </template>
      </a-table-column>
      <a-table-column
        :width="120"
        data-index=""
        title="操作"
        fixed="right"
        align="center"
      >
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="edit(record.id)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <AddInterviewRecord
    v-model:visible="templateVisible"
    :data="templateDate"
    @save="save"
  >
  </AddInterviewRecord>
</template>

<script lang="ts" setup>
import * as api from '@/apis/management/performance/baseSetting/assessmentSetting/index';
import type * as interfaceObj from '@/apis/management/performance/baseSetting/assessmentSetting/type';
import AddInterviewRecord from './components/AddInterviewRecord/index.vue';
import TableTurn, { paramsType } from '@/components/TableTurn/index.vue';
import { cloneDeep } from 'lodash';

const router = useRouter();
const title = '面谈记录';
const tableRef = ref();

const breadCrumb: string[] = ['人事', '基础设置', '考核模板库', '绩效考核模板'];
const tableParams = reactive({ name: '' });
/**
 * 获取绩效考核模板列表
 */
const getInterviewRecord = async (params: paramsType) => {
  try {
    const res = await api.getInterviewRecordList({
      ...params,
      name: tableParams.name
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
const templateVisible = ref(false);
const templateDate = ref<interfaceObj.Interview>({});
const add = async () => {
  templateDate.value = {};
  templateVisible.value = true;
};
const edit = async (id: number) => {
  if (!id) return;
  const res = await api.getInterviewRecordById({ id });
  templateDate.value = res || {};
  templateDate.value.cname = templateDate.value.name;
  templateVisible.value = true;
};
const del = async (id: number) => {
  await api.delInterviewRecord({ ids: [id] });
  refresh();
};
const save = async () => {
  if (templateDate.value.id) {
    await api.editInterviewRecord(templateDate.value);
  } else {
    await api.addInterviewRecord(templateDate.value);
  }
  templateVisible.value = false;

  refresh();
};
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less"></style>
